<template>
  <view class="shift-detail-page">
    <!-- 顶部导航栏 -->
    <view class="top-header">
      <view class="header-left" @click="goBack">
        <image
          class="back-icon"
          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E"
          mode="aspectFit"
        ></image>
        <text>返回</text>
      </view>

      <view class="header-center">
        <text class="page-title">班次列表</text>
      </view>

      <view class="header-right">
        <view class="search-btn" @click="toggleSearch">
          <image
            class="search-icon"
            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"
            mode="aspectFit"
          ></image>
        </view>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar" v-if="showSearch">
      <input
        v-model="searchText"
        placeholder="搜索关键词"
        @input="onSearch"
        @confirm="onSearchConfirm"
      />
      <image
        class="search-icon"
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"
        mode="aspectFit"
      ></image>
      <view class="clear-btn" v-if="searchText" @click="clearSearch">
        <text>×</text>
      </view>
    </view>

    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: currentTab === 'pending' }"
        @click="switchTab('pending')"
      >
        <text>待查房</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 'checked' }"
        @click="switchTab('checked')"
      >
        <text>已查房</text>
      </view>
    </view>

    <!-- 患者列表 -->
    <view class="patient-list">
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredPatients.length === 0">
        <image
          class="empty-icon"
          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23CCCCCC'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"
          mode="aspectFit"
        ></image>
        <text class="empty-text">{{
          searchText
            ? "没有找到相关患者"
            : "暂无" + (currentTab === "pending" ? "待查房" : "已查房") + "患者"
        }}</text>
      </view>

      <view
        class="patient-card"
        v-for="(patient, index) in filteredPatients"
        :key="index"
      >
        <view class="card-header">
          <view class="department">
            <text>{{ patient.department }}</text>
          </view>
          <view class="patient-info">
            <text class="name">{{ patient.name }}</text>
            <text class="gender-age"
              >{{ patient.gender }} {{ patient.age }}岁</text
            >
          </view>
        </view>

        <view class="card-body">
          <view class="info-row">
            <text class="label">住院号:</text>
            <text class="value">{{ patient.admissionNo }}</text>
            <text class="label">主管医生:</text>
            <text class="value">{{ patient.doctor }}</text>
            <text class="label">床号:</text>
            <text class="value">{{ patient.bedNo }}</text>
          </view>
          <view class="info-row">
            <text class="label">诊断:</text>
            <text class="value">{{ patient.diagnosis }}</text>
            <text class="label">主管护士:</text>
            <text class="value">{{ patient.nurse }}</text>
            <text class="label">入院时间:</text>
            <text class="value">{{ patient.admissionTime }}</text>
          </view>
        </view>

        <view class="card-footer">
          <image
            class="edit-icon"
            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310B981'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E"
            mode="aspectFit"
            @click="editPatient(patient)"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: "",
      showSearch: true, // 是否显示搜索栏
      currentTab: "pending", // pending 或 checked
      shiftInfo: {}, // 从上一页传递的班次信息
      pageStatus: "", // empty, pending, checked
      // 模拟患者数据
      patientList: [],
      // 完整的患者数据池
      allPatients: [
        {
          department: "消化内科",
          name: "张三",
          gender: "男",
          age: 35,
          admissionNo: "ZY001",
          doctor: "李医生",
          bedNo: "CH01",
          diagnosis: "胃溃疡",
          nurse: "王护士",
          admissionTime: "2021-11-29 09:00",
          status: "pending", // pending 或 checked
        },
        {
          department: "心内科",
          name: "李四",
          gender: "女",
          age: 52,
          admissionNo: "ZY002",
          doctor: "陈医生",
          bedNo: "XN02",
          diagnosis: "冠心病",
          nurse: "赵护士",
          admissionTime: "2021-11-28 14:30",
          status: "pending",
        },
        {
          department: "呼吸内科",
          name: "王五",
          gender: "男",
          age: 68,
          admissionNo: "ZY003",
          doctor: "刘医生",
          bedNo: "HX03",
          diagnosis: "慢性支气管炎",
          nurse: "孙护士",
          admissionTime: "2021-11-27 10:15",
          status: "checked",
        },
        {
          department: "骨科",
          name: "赵六",
          gender: "男",
          age: 42,
          admissionNo: "ZY004",
          doctor: "周医生",
          bedNo: "GK04",
          diagnosis: "骨折",
          nurse: "吴护士",
          admissionTime: "2021-11-30 08:20",
          status: "checked",
        },
        {
          department: "神经内科",
          name: "钱七",
          gender: "女",
          age: 61,
          admissionNo: "ZY005",
          doctor: "郑医生",
          bedNo: "SJ05",
          diagnosis: "脑梗塞",
          nurse: "冯护士",
          admissionTime: "2021-11-26 16:45",
          status: "pending",
        },
        {
          department: "消化内科",
          name: "孙八",
          gender: "男",
          age: 29,
          admissionNo: "ZY006",
          doctor: "李医生",
          bedNo: "CH06",
          diagnosis: "急性肠胃炎",
          nurse: "王护士",
          admissionTime: "2021-12-01 11:30",
          status: "checked",
        },
        {
          department: "内分泌科",
          name: "周九",
          gender: "女",
          age: 55,
          admissionNo: "ZY007",
          doctor: "黄医生",
          bedNo: "NF07",
          diagnosis: "糖尿病",
          nurse: "林护士",
          admissionTime: "2021-11-25 13:00",
          status: "pending",
        },
        {
          department: "心内科",
          name: "吴十",
          gender: "男",
          age: 73,
          admissionNo: "ZY008",
          doctor: "陈医生",
          bedNo: "XN08",
          diagnosis: "高血压",
          nurse: "赵护士",
          admissionTime: "2021-11-24 09:50",
          status: "checked",
        },
      ],
    };
  },
  computed: {
    filteredPatients() {
      let list = this.patientList.filter((p) => p.status === this.currentTab);

      if (this.searchText) {
        list = list.filter(
          (p) =>
            p.name.includes(this.searchText) ||
            p.admissionNo.includes(this.searchText) ||
            p.bedNo.includes(this.searchText)
        );
      }

      return list;
    },
  },
  onLoad(options) {
    // 获取传递的参数
    if (options.status) {
      this.pageStatus = options.status;

      // 根据status初始化患者数据：
      // - "empty": 开始查房，只有待查房数据（所有患者status都是pending）
      // - "pending": 继续查房，有已查房和待查房数据（部分pending，部分checked）
      // - "checked": 查看，只有已查房数据（所有患者status都是checked）

      if (options.status === "empty") {
        // 开始查房：所有患者都是待查房状态
        this.patientList = this.allPatients.map((p) => ({
          ...p,
          status: "pending",
        }));
        this.currentTab = "pending";
      } else if (options.status === "pending") {
        // 继续查房：保持原有的已查和待查数据
        this.patientList = [...this.allPatients];
        this.currentTab = "pending";
      } else if (options.status === "checked") {
        // 查看：所有患者都是已查房状态
        this.patientList = this.allPatients.map((p) => ({
          ...p,
          status: "checked",
        }));
        this.currentTab = "checked";
      }
    } else {
      // 默认使用原有数据
      this.patientList = [...this.allPatients];
    }

    // 可以获取其他班次信息
    if (options.shiftData) {
      this.shiftInfo = JSON.parse(decodeURIComponent(options.shiftData));
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    switchTab(tab) {
      this.currentTab = tab;
      this.searchText = ""; // 切换Tab时清空搜索
    },
    toggleSearch() {
      this.showSearch = !this.showSearch;
      if (!this.showSearch) {
        this.searchText = ""; // 关闭搜索时清空
      }
    },
    onSearch() {
      // 实时搜索，过滤结果已由computed处理
    },
    onSearchConfirm() {
      // 点击搜索按钮时触发
      if (this.filteredPatients.length === 0 && this.searchText) {
        uni.showToast({
          title: "没有找到相关患者",
          icon: "none",
        });
      }
    },
    clearSearch() {
      this.searchText = "";
    },
    editPatient(patient) {
      const patientData = encodeURIComponent(JSON.stringify(patient));
      uni.navigateTo({
        url: `/pages/patient/record?patientData=${patientData}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.shift-detail-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;

  // 顶部导航栏
  .top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    z-index: 999;

    .header-left {
      display: flex;
      align-items: center;

      .back-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 12rpx;
      }

      text {
        font-size: 28rpx;
        color: #ffffff;
      }
    }

    .header-center {
      flex: 1;
      text-align: center;

      .page-title {
        font-size: 36rpx;
        color: #ffffff;
        font-weight: bold;
      }
    }

    .header-right {
      .search-btn {
        cursor: pointer;

        .search-icon {
          width: 44rpx;
          height: 44rpx;
        }

        &:active {
          opacity: 0.7;
        }
      }
    }
  }

  // 搜索栏
  .search-bar {
    position: fixed;
    top: 120rpx;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 20rpx 40rpx;
    display: flex;
    align-items: center;
    z-index: 998;
    border-bottom: 1rpx solid #e5e7eb;

    input {
      flex: 1;
      height: 64rpx;
      background: #f5f7fa;
      border-radius: 32rpx;
      padding: 0 48rpx 0 24rpx;
      font-size: 28rpx;
    }

    .search-icon {
      width: 36rpx;
      height: 36rpx;
      position: absolute;
      right: 56rpx;
    }

    .clear-btn {
      position: absolute;
      right: 100rpx;
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      text {
        font-size: 48rpx;
        color: #999999;
        line-height: 1;
      }

      &:active {
        opacity: 0.6;
      }
    }
  }

  // Tab栏
  .tab-bar {
    position: fixed;
    top: 223rpx;
    left: 0;
    right: 0;
    background: #ffffff;
    display: flex;
    z-index: 998;
    border-bottom: 1rpx solid #e5e7eb;

    .tab-item {
      flex: 1;
      text-align: center;
      padding: 18rpx 0;
      position: relative;

      text {
        font-size: 28rpx;
        color: #666666;
      }

      &.active {
        text {
          color: #10b981;
          font-weight: bold;
        }

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 4rpx;
          background: #10b981;
          border-radius: 2rpx;
        }
      }
    }
  }

  // 患者列表
  .patient-list {
    margin-top: 298rpx;
    padding: 20rpx 40rpx;

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 120rpx 0;

      .empty-icon {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 28rpx;
        opacity: 0.5;
      }

      .empty-text {
        font-size: 28rpx;
        color: #999999;
      }
    }

    .patient-card {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 28rpx;
      margin-bottom: 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
      position: relative;

      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;

        .department {
          background: #10b981;
          color: #ffffff;
          padding: 6rpx 18rpx;
          border-radius: 8rpx;
          margin-right: 20rpx;

          text {
            font-size: 24rpx;
          }
        }

        .patient-info {
          display: flex;
          align-items: center;

          .name {
            font-size: 30rpx;
            color: #333333;
            font-weight: bold;
            margin-right: 20rpx;
          }

          .gender-age {
            font-size: 26rpx;
            color: #666666;
          }
        }
      }

      .card-body {
        .info-row {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 16rpx;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            font-size: 26rpx;
            color: #999999;
            margin-right: 12rpx;
          }

          .value {
            font-size: 26rpx;
            color: #333333;
            margin-right: 32rpx;
          }
        }
      }

      .card-footer {
        position: absolute;
        right: 28rpx;
        bottom: 28rpx;

        .edit-icon {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
}
</style>
